<template>
	<uni-popup ref="popup" type="bottom" @change="change">
		<view class="popup-content flex flex-column">
			<view class="flex justify-end">
				<image src="/static/images/common/clousex-big.png" class="close_btn" @tap="close"></image>
			</view>
			<view class="mt-30">
				<button 
					class="pt-10 pb-10 border-radius-10 bg-yellow-light font-size-28" 
					type="primary" 
					open-type="getPhoneNumber" 
					@getphonenumber="decryptPhoneNumber"
				>
					点击登录
				</button>
				<view class="prd mt-100 flex justify-center align-center">
					<view class="prompt" v-if="showPrompt">请阅读并且勾选用户协议</view>
					<uni-icons
						custom-prefix="iconfont" 
						:type="isSelected?'icon-yuanxingxuanzhongfill':'icon-yuanxingweixuanzhong'"
						:color="isSelected?'#EDAC2F':'#999'"
						size="18"
						@click="onSel"/>
					<text class="mr-10 ml-10">我已阅读并同意</text>
					<navigator class="line-yellow" open-type="navigate" url="/pages/article/agreement?type=user" hover-class="none">用户服务协议、</navigator>
					<navigator class="line-yellow" open-type="navigate" url="/pages/article/agreement?type=privacy" hover-class="none">隐私政策</navigator>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import { mapMutations } from 'vuex'
	
	export default {
		name: 'LoginPopup',
		components: {
			uniPopup
		},
		props: {
			
		},
		data(){
			return {
				isSelected: false,
				showPrompt: false,
			}
		},
		methods: {
			...mapMutations(['SET_USERINFO', 'SET_ISLOGIN']),
			onSel(){
				this.isSelected = !this.isSelected
				this.showPrompt = false
			},
			decryptPhoneNumber(val){
				console.log(val)
			},
			onLogin(){
				let _this = this
				if(!this.isSelected){
					this.showPrompt = true
				}else {
					uni.login({
					  provider: 'weixin', //使用微信登录
					  success: function (loginRes) {
							_this.$http.OnLogin({code: loginRes.code}).then(res=>{
								_this.SET_USERINFO(res.data)
								_this.close()
							})
					  }
					});
				}
			},
			open() {
				this.$refs['popup'].open()
			},
			close() {
				this.$refs['popup'].close()
			},
			change({show}) {
				this.$emit('change', show)
			},
			getUserInfo(e) {
				//请配置AppID，否则获取失败
				if(e.target.errMsg !== 'getUserInfo:ok') {
					uni.showModal({
						title: '提示',
						content: '您已取消了授权，请重新授权登录',
						showCancel: false
					})
					return
				}
				this.SET_USERINFO(e.target.userInfo)
				this.SET_ISLOGIN(true)
				this.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-content {
		background-color: #FFFFFF;
		border-radius: 24rpx 24rpx 0 0;
		// height: 50vh;
		padding: 30rpx 40rpx 50rpx 40rpx;
		border-bottom:1px #dedede solid;
	}
	
	.close_btn {
		width: 40rpx;
		height: 40rpx;
	}
	.prd{
		position:relative;
		.prompt{
			background: #333;
			color:#fff;
			padding: 20rpx;
			border-radius:10rpx;
			position: absolute;
			left: 0;
			top: -86rpx;
		}
	}
</style>
